<template>
    <div class='left-container'>
        <!--<div class = 'title'>直播课堂</div>-->
        <div class="title">
            <img src="../../src/assets/img/welcome/logoText.png" alt="">
        </div>
        <div class="icon-list">
            <span @click="handleClickIcon(1)" :class="{deepColor: activeTab === 'Member'}">
                <img src="../../src/assets/img/welcome/icon2.png" alt="" v-if="activeTab !== 'Member'">
                <img src="../../src/assets/img/welcome/icon21.png" alt="" v-else>
            </span>
            <span @click="handleClickIcon(2)" :class="{deepColor: activeTab === 'Show'}">
                <img src="../../src/assets/img/welcome/icon3.png" alt="" v-if="activeTab !== 'Show'">
                <img src="../../src/assets/img/welcome/icon31.png" alt="" v-else>
            </span>
            <span @click="handleClickIcon(3)" :class="{deepColor: activeTab === 'Tv'}">
                <img src="../../src/assets/img/welcome/icon4.png" alt="" v-if="activeTab !== 'Tv'">
                <img src="../../src/assets/img/welcome/icon41.png" alt="" v-else>
            </span>
            <span @click="handleClickIcon(4)" :class="{deepColor: activeTab === 'Text'}">
                <img src="../../src/assets/img/welcome/icon1.png" alt="" v-if="activeTab !== 'Text'">
                <img src="../../src/assets/img/welcome/icon11.png" alt="" v-else>
            </span>

        </div>
        <div class="active-line">
            <span v-if="activeTab === 'Member'">设置</span>
            <span v-if="activeTab === 'Show'">直播</span>
            <span v-if="activeTab === 'Tv'">题库</span>
            <span v-if="activeTab === 'Text'">网校</span>
        </div>
        <!--第一个-->
        <el-menu default-active="2" class="el-menu-vertical-demo teacher-nav" background-color="#22345E"
            text-color="#fff" active-text-color="#55A8FD" v-if="activeTab === 'Member'" :default-openeds="openeds"
            @open="handleOpen">
            <el-submenu index="1">
                <template slot="title">
                    <!-- <div class="circle"></div> -->
                    <span class="nav-title">欢迎</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="1-1">
                        <router-link to="/">欢迎页</router-link>
                    </el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                    <el-menu-item index="1-2">
                        <router-link to="/studentDistribution">学员分布</router-link>
                    </el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                    <el-menu-item index="1-3">
                        <router-link to="/studentFrom">学员来源</router-link>
                    </el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                    <el-menu-item index="1-4">
                        <router-link to="/orderAnalysis">订单分析</router-link>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title">
                    <!-- <div class="circle"></div> -->
                    <span class="nav-title">学生</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="2-1">
                        <router-link to="/addStudent">新增学生</router-link>
                    </el-menu-item>
                    <el-menu-item index="2-2">
                        <router-link to="/studentList">学生列表</router-link>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title">
                    <!-- <div class="circle"></div> -->
                    <span class="nav-title">讲师</span>
                </template>
                <el-menu-item-group>

                    <el-menu-item index="3-1">
                        <router-link to="/addTeacher">新增讲师</router-link>
                    </el-menu-item>
                    <el-menu-item index="3-2">
                        <router-link to="/teacherList">讲师列表</router-link>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
                <template slot="title">
                    <!-- <div class="circle"></div> -->
                    <span class="nav-title">学科
                    </span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="4-1">
                        <router-link to="/addSubject">新增学科</router-link>
                    </el-menu-item>
                    <el-menu-item index="4-2">
                        <router-link to="/subjectList">学科列表</router-link>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5">
                <template slot="title">
                    <!-- <div class="circle"></div> -->
                    <span class="nav-title">班级</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="5-1">
                        <router-link to="/addClass">新增班级</router-link>
                    </el-menu-item>
                    <el-menu-item index="5-2">
                        <router-link to="/classList">班级列表</router-link>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
        <!-- 第二个 -->
        <el-menu default-active="b" class="el-menu-vertical-demo teacher-nav" background-color="#22345E"
            text-color="#fff" active-text-color="#55A8FD" v-if="activeTab === 'Show'" :default-openeds="openeds"
            @open="handleOpen">
            <el-submenu index="b">
                <template slot="title">
                    <!-- <div class="circle"></div> -->
                    <span class="nav-title">直播大班课</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="b-1">
                        <router-link to="/addLargeClass">新增直播大班课</router-link>
                    </el-menu-item>
                    <el-menu-item index="b-2">
                        <router-link to="/largeClassList">大班课列表</router-link>
                    </el-menu-item>
                    <el-menu-item index="b-3">
                        <router-link to="/teacherLiveCourse">进入教室</router-link>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="b2">
                <template slot="title">
                    <!-- <div class="circle"></div> -->
                    <span class="nav-title">直播小班课</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="b2-1">
                        <router-link to="/addSmallClass">新增直播小班课</router-link>
                    </el-menu-item>
                    <el-menu-item index="b2-2">
                        <router-link to="/smallClassList">小班课列表</router-link>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="b3">
                <template slot="title">
                    <!-- <div class="circle"></div> -->
                    <span class="nav-title">直播1v1</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="b3-1">
                        <router-link to="/addOnetoOne">新增直播课1v1</router-link>
                    </el-menu-item>
                    <el-menu-item index="b3-2">
                        <router-link to="/oneToOneList">1v1课列表</router-link>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="b4">
                <template slot="title">
                    <!-- <div class="circle"></div> -->
                    <span class="nav-title">点播</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="b4-1">
                        <router-link to="/addDemandClass">新增点播课程</router-link>
                    </el-menu-item>
                    <el-menu-item index="b4-2">
                        <router-link to="/demandList">点播课列表</router-link>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="b5">
                <template slot="title">
                    <!-- <div class="circle"></div> -->
                    <span class="nav-title">面授</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="b5-1">
                        <router-link to="/addFaceToFaceClass">新增面授课程</router-link>
                    </el-menu-item>
                    <el-menu-item index="b5-2">
                        <router-link to="/faceToFaceList">面授课列表</router-link>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
        <!-- 第三个 -->
        <el-menu default-active="c" class="el-menu-vertical-demo teacher-nav" background-color="#22345E"
            text-color="#fff" active-text-color="#55A8FD" v-if="activeTab === 'Tv'" :default-openeds="openeds"
            @open="handleOpen">
            <el-submenu index="c">
                <template slot="title">
                    <!-- <div class="circle"></div> -->
                    <span class="nav-title">试题</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="c-1">
                        <router-link to="/addQuestions">新增试题</router-link>
                    </el-menu-item>
                    <el-menu-item index="c-2">
                        <router-link to="/questionList">试题列表</router-link>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="c2">
                <template slot="title">
                    <!-- <div class="circle"></div> -->
                    <span class="nav-title">试卷</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="c2-1">
                        <router-link to="/addTestPaper">新增试卷</router-link>
                    </el-menu-item>
                    <el-menu-item index="c2-2">
                        <router-link to="/testPaperList">试卷列表</router-link>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="c3">
                <template slot="title">
                    <!-- <div class="circle"></div> -->
                    <span class="nav-title">测试</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="c3-1">
                        <router-link to="/testResult">测试结果</router-link>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
        <!-- 第四个 -->
        <el-menu default-active="d" class="el-menu-vertical-demo teacher-nav" background-color="#22345E"
            text-color="#fff" active-text-color="#55A8FD" v-if="activeTab === 'Text'" :default-openeds="openeds"
            @open="handleOpen">
            <el-submenu index="d">
                <template slot="title">
                    <!-- <div class="circle"></div> -->
                    <span class="nav-title">⽹校班级</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="d-1">
                        <router-link to="/addNetSchoolClass">新增网校班级</router-link>
                    </el-menu-item>
                    <el-menu-item index="d-2">
                        <router-link to="/netSchoolList">网校班级</router-link>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="d2">
                <template slot="title">
                    <span class="nav-title">名师管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="d2-1">
                        <router-link to="/addTeacherInfo">新增名师资料</router-link>
                    </el-menu-item>
                    <el-menu-item index="d2-2">
                        <router-link to="/teacherInfoList">名师管理</router-link>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="d3">
                <template slot="title">
                    <span class="nav-title">订单管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="d3-1">
                        <router-link to="/classOrder">购课订单</router-link>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="d4">
                <template slot="title">
                    <span class="nav-title">购课订单</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="d4-1">
                        <router-link to="/addCoupons">新增优惠券</router-link>
                    </el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                    <el-menu-item index="d4-1">
                        <router-link to="/couponsList">优惠券查询</router-link>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script>
import { geTeacherHomeMenu, geSchoolInfo } from '@/api/home'
export default {
    name: 'Header',
    data() {
        return {
            // activeTab: 'Member', // 默认显示会员
            menuInfo: [],
            schoolInfo: ''
        }
    },
    props: {
        openeds: {
            type: Array,
            default: function () {
                return []
            }

        },
        activeTab: {
            type: String,
            default: function () {
                return 'Member'
            }

        }
    },
    mounted() {
        this.geTeacherHomeMenu()
        // this.geSchoolInfo();
    },
    methods: {
        geTeacherHomeMenu() {
            geTeacherHomeMenu({}).then(res => {
                if (res.code == 1) {
                    this.menuInfo = res.data
                }
            })
        },
        geSchoolInfo() {
            geSchoolInfo({}).then(res => {
                if (res.code == 1) {
                    this.schoolInfo = res.data
                }
            })
        },
        // 点击上面图标
        handleClickIcon(index) {
            if (index === 1) {
                this.$parent.activeTab = 'Member'
            }
            if (index === 2) {
                this.$parent.activeTab = 'Show'
            }
            if (index === 3) {
                this.$parent.activeTab = 'Tv'
            }
            if (index === 4) {
                this.$parent.activeTab = 'Text'
            }
            console.log('this.activeTab:', this.$parent.activeTab)
        },
        handleOpen(key, keyPath) {
            let openStr = key + ''
            this.$parent.openeds = [openStr]
            console.log('openeds:', this.$parent.openeds)
        }

    }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    @import url('../../src/assets/less/Mixins.less');
    @import url('../../src/assets/less/common.less');

    .left-container {
        width: 224px;
        /*float: left;*/

        .el-menu {
            width: 224px;
        }

        .title {
            height: 80px;

            img {
                width: 224px;
                height: 80px;
            }

            /*background: #55A8FD;*/
            /*font-size:26px;*/
            /*line-height: 80px;*/
            /*color: #ffffff;*/
        }

        .circle {
            height: 4px;
            width: 4px;
            background: #55A8FD;
            border-radius: 2px;
            position: relative;
            top: 30px;
            left: 60px;
        }

        .icon-list {
            img {
                width: 20px;
                height: 20px;
            }

            height: 36px;
            /*background: #22345E;*/
            background: rgb(56, 73, 114);
            .flex(row, space-between, center, nowrap);

            .deepColor {
                background: #22345E;
            }

            span {
                height: 100%;
                width: 25%;
                cursor: pointer;
                text-align: center;

                img {
                    margin-top: 8px;
                }

            }
        }

        .nav-title {
            &::before {
                height: 4px;
                width: 4px;
                content: "";
                background: #55A8FD;
                border-radius: 2px;
                display: inline-block;
                position: relative;
                left: -10px;
                top: -2px;
                // position: absolute;
                // left: 0px;
                // top: 27%;

            }
        }

        .active-line {
            height: 45px;
            line-height: 45px;
            background: #22345E;
            color: #FFFFFF;
            text-align: left;
            font-size: 14px;
            padding-left: 20px;
            position: relative;

            &::before {
                height: 32%;
                width: 2px;
                content: "";
                background: #55A8FD;
                position: absolute;
                left: 0px;
                top: 35%;
                display: inline-block;
            }
        }

        .el-menu {
            a {
                color: #FFFFFF;
                text-decoration: none;
            }
        }
    }

</style>
<style lang='less'>
    .left-container {
        box-shadow: 0px 0px 12px 0px rgba(113, 113, 113, 0.5);
        /*box-shadow:0px 0px 12px 0px red;*/
        position: relative;

        .teacher-nav {
            .el-submenu__title {
                line-height: 40px !important;
                height: 40px !important;
                padding-left: 60px !important;

                &:hover {
                    background: rgba(85, 168, 253, 0.3) !important;
                    color: #55A8FD !important;
                }
            }

            .el-menu-item-group {
                >div {
                    display: none !important;
                }

                ul li {
                    padding: 0px !important;

                    a {
                        width: 100%;
                        height: 100%;
                        display: block;
                        padding-left: 65px !important;

                    }

                }

                .el-menu-item {
                    line-height: 40px !important;
                    height: 40px !important;

                    &:hover {
                        background: rgba(85, 168, 253, 0.3) !important;
                        color: #55A8FD !important;
                    }

                    a:hover {
                        color: #55A8FD !important;
                    }
                }

                .router-link-exact-active {
                    background: rgba(85, 168, 253, 0.3) !important;
                    color: #55A8FD !important;
                    width: 160px;
                }

            }

            .el-submenu__icon-arrow {
                &::before {
                    /*position: relative;*/
                    /*left: 10px;*/
                    color: #fff;
                }
            }
        }

    }

    .el-menu {
        li {
            cursor: pointer !important;
        }
    }

</style>
